<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择城市</title>
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/css/selectcity.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
</head>
<body>
  <!--引入导航栏-->
  <div th:replace="~{head/topbar::topBar}"></div>
    <div class="city_selection_section">
        <div>
          <div class="city_recommend c_b row hot-city">
            <div class="city_recommend_tit col-md-1 offset-md-1">
              热门城市
            </div>
            <ul class="city_recommend_list col-md-6">
              <li><a th:href="@{/index.html(city='北京')}">北京</a></li>
              <li><a th:href="@{/index.html(city='上海')}">上海</a></li>
              <li><a th:href="@{/index.html(city='深圳')}">深圳</a></li>
              <li><a th:href="@{/index.html(city='广州')}">广州</a></li>
              <li><a th:href="@{/index.html(city='杭州')}">杭州</a></li>
              <li><a th:href="@{/index.html(city='南京')}">南京</a></li>
            </ul>
          </div>
          <div class="row" id="search-box">
            <div>
              <div class="input-group animate__animated animate__fadeInUp">
                <input id="search-input" type="text" class="form-control" placeholder="请输入城市名(例：北京)">
                <span class="input-group-btn">
                  <a href="#"><button id="search-button" class="btn btn-success animate__animated animate__pulse"
                    type="button" th:onclick="|search()|">切换城市</button></a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="city_recommend">
          <div class="city-item VIEWDATA">

            <div class="city_list_section">
              <ul class="city_list_ul">
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>A</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">安徽</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='安庆')}">安庆</a></li>
                        <li><a th:href="@{/index.html(city='滁州')}">滁州</a></li>
                        <li><a th:href="@{/index.html(city='合肥')}">合肥</a></li>
                        <li><a th:href="@{/index.html(city='马鞍山')}">马鞍山</a></li>
                        <li><a th:href="@{/index.html(city='芜湖')}">芜湖</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>B</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">北京</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='北京')}">北京</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>C</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">重庆</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='重庆')}">重庆</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>F</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">福建</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='福州')}">福州</a></li>
                        <li><a th:href="@{/index.html(city='泉州')}">泉州</a></li>
                        <li><a th:href="@{/index.html(city='厦门')}">厦门</a></li>
                        <li><a th:href="@{/index.html(city='漳州')}">漳州</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>G</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">广东</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='东莞')}">东莞</a></li>
                        <li><a th:href="@{/index.html(city='佛山')}">佛山</a></li>
                        <li><a th:href="@{/index.html(city='广州')}">广州</a></li>
                        <li><a th:href="@{/index.html(city='惠州')}">惠州</a></li>
                        <li><a th:href="@{/index.html(city='江门')}">江门</a></li>
                        <li><a th:href="@{/index.html(city='清远')}">清远</a></li>
                        <li><a th:href="@{/index.html(city='深圳')}">深圳</a></li>
                        <li><a th:href="@{/index.html(city='珠海')}">珠海</a></li>
                        <li><a th:href="@{/index.html(city='湛江')}">湛江</a></li>
                        <li><a th:href="@{/index.html(city='中山')}">中山</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">广西</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='北海')}">北海</a></li>
                        <li><a th:href="@{/index.html(city='防城港')}">防城港</a></li>
                        <li><a th:href="@{/index.html(city='桂林')}">桂林</a></li>
                        <li><a th:href="@{/index.html(city='柳州')}">柳州</a></li>
                        <li><a th:href="@{/index.html(city='南宁')}">南宁</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">甘肃</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='兰州')}">兰州</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">贵州</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='贵阳')}">贵阳</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>H</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">河北</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='保定')}">保定</a></li>
                        <li><a th:href="@{/index.html(city='廊坊')}">廊坊</a></li>
                        <li><a th:href="@{/index.html(city='秦皇岛')}">秦皇岛</a></li>
                        <li><a th:href="@{/index.html(city='石家庄')}">石家庄</a></li>
                        <li><a th:href="@{/index.html(city='唐山')}">唐山</a></li>
                        <li><a th:href="@{/index.html(city='张家口')}">张家口</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">海南</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='保亭')}">保亭</a></li>
                        <li><a th:href="@{/index.html(city='澄迈')}">澄迈</a></li>
                        <li><a th:href="@{/index.html(city='儋州')}">儋州</a></li>
                        <li><a th:href="@{/index.html(city='海口')}">海口</a></li>
                        <li><a th:href="@{/index.html(city='临高')}">临高</a></li>
                        <li><a th:href="@{/index.html(city='乐东')}">乐东</a></li>
                        <li><a th:href="@{/index.html(city='陵水')}">陵水</a></li>
                        <li><a th:href="@{/index.html(city='琼海')}">琼海</a></li>
                        <li><a th:href="@{/index.html(city='三亚')}">三亚</a></li>
                        <li><a th:href="@{/index.html(city='五指山')}">五指山</a></li>
                        <li><a th:href="@{/index.html(city='文昌')}">文昌</a></li>
                        <li><a th:href="@{/index.html(city='万宁')}">万宁</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">湖南</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='长沙')}">长沙</a></li>
                        <li><a th:href="@{/index.html(city='常德')}">常德</a></li>
                        <li><a th:href="@{/index.html(city='岳阳')}">岳阳</a></li>
                        <li><a th:href="@{/index.html(city='株洲')}">株洲</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">河南</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='开封')}">开封</a></li>
                        <li><a th:href="@{/index.html(city='洛阳')}">洛阳</a></li>
                        <li><a th:href="@{/index.html(city='三门峡')}">三门峡</a></li>
                        <li><a th:href="@{/index.html(city='新乡')}">新乡</a></li>
                        <li><a th:href="@{/index.html(city='许昌')}">许昌</a></li>
                        <li><a th:href="@{/index.html(city='郑州')}">郑州</a></li>
                        <li><a th:href="@{/index.html(city='周口')}">周口</a></li>
                        <li><a th:href="@{/index.html(city='驻马店')}">驻马店</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">湖北</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='鄂州')}">鄂州</a></li>
                        <li><a th:href="@{/index.html(city='黄石')}">黄石</a></li>
                        <li><a th:href="@{/index.html(city='武汉')}">武汉</a></li>
                        <li><a th:href="@{/index.html(city='襄阳')}">襄阳</a></li>
                        <li><a th:href="@{/index.html(city='宜昌')}">宜昌</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">黑龙江</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='哈尔滨')}">哈尔滨</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>J</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">江西</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='赣州')}">赣州</a></li>
                        <li><a th:href="@{/index.html(city='九江')}">九江</a></li>
                        <li><a th:href="@{/index.html(city='吉安')}">吉安</a></li>
                        <li><a th:href="@{/index.html(city='南昌')}">南昌</a></li>
                        <li><a th:href="@{/index.html(city='上饶')}">上饶</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">江苏</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='常州')}">常州</a></li>
                        <li><a th:href="@{/index.html(city='海门')}">海门</a></li>
                        <li><a th:href="@{/index.html(city='淮安')}">淮安</a></li>
                        <li><a th:href="@{/index.html(city='江阴')}">江阴</a></li>
                        <li><a th:href="@{/index.html(city='昆山')}">昆山</a></li>
                        <li><a th:href="@{/index.html(city='南京')}">南京</a></li>
                        <li><a th:href="@{/index.html(city='南通')}">南通</a></li>
                        <li><a th:href="@{/index.html(city='苏州')}">苏州</a></li>
                        <li><a th:href="@{/index.html(city='无锡')}">无锡</a></li>
                        <li><a th:href="@{/index.html(city='徐州')}">徐州</a></li>
                        <li><a th:href="@{/index.html(city='盐城')}">盐城</a></li>
                        <li><a th:href="@{/index.html(city='镇江')}">镇江</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">吉林</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='长春')}">长春</a></li>
                        <li><a th:href="@{/index.html(city='吉林')}">吉林</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>L</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">辽宁</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='大连')}">大连</a></li>
                        <li><a th:href="@{/index.html(city='丹东')}">丹东</a></li>
                        <li><a th:href="@{/index.html(city='沈阳')}">沈阳</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>N</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">内蒙古</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='包头')}">包头</a></li>
                        <li><a th:href="@{/index.html(city='赤峰')}">赤峰</a></li>
                        <li><a th:href="@{/index.html(city='呼和浩特')}">呼和浩特</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">宁夏</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='银川')}">银川</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>S</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">山东</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='菏泽')}">菏泽</a></li>
                        <li><a th:href="@{/index.html(city='济南')}">济南</a></li>
                        <li><a th:href="@{/index.html(city='济宁')}">济宁</a></li>
                        <li><a th:href="@{/index.html(city='临沂')}">临沂</a></li>
                        <li><a th:href="@{/index.html(city='青岛')}">青岛</a></li>
                        <li><a th:href="@{/index.html(city='泰安')}">泰安</a></li>
                        <li><a th:href="@{/index.html(city='潍坊')}">潍坊</a></li>
                        <li><a th:href="@{/index.html(city='威海')}">威海</a></li>
                        <li><a th:href="@{/index.html(city='烟台')}">烟台</a></li>
                        <li><a th:href="@{/index.html(city='淄博')}">淄博</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">四川</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='巴中')}">巴中</a></li>
                        <li><a th:href="@{/index.html(city='成都')}">成都</a></li>
                        <li><a th:href="@{/index.html(city='德阳')}">德阳</a></li>
                        <li><a th:href="@{/index.html(city='达州')}">达州</a></li>
                        <li><a th:href="@{/index.html(city='广元')}">广元</a></li>
                        <li><a th:href="@{/index.html(city='乐山')}">乐山</a></li>
                        <li><a th:href="@{/index.html(city='凉山')}">凉山</a></li>
                        <li><a th:href="@{/index.html(city='绵阳')}">绵阳</a></li>
                        <li><a th:href="@{/index.html(city='眉山')}">眉山</a></li>
                        <li><a th:href="@{/index.html(city='南充')}">南充</a></li>
                        <li><a th:href="@{/index.html(city='遂宁')}">遂宁</a></li>
                        <li><a th:href="@{/index.html(city='宜宾')}">宜宾</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">陕西</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='宝鸡')}">宝鸡</a></li>
                        <li><a th:href="@{/index.html(city='汉中')}">汉中</a></li>
                        <li><a th:href="@{/index.html(city='西安')}">西安</a></li>
                        <li><a th:href="@{/index.html(city='咸阳')}">咸阳</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">山西</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='晋中')}">晋中</a></li>
                        <li><a th:href="@{/index.html(city='太原')}">太原</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">上海</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='上海')}">上海</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>T</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">天津</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='天津')}">天津</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>X</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">新疆</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='乌鲁木齐')}">乌鲁木齐</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>Y</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">云南</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='大理')}">大理</a></li>
                        <li><a th:href="@{/index.html(city='昆明')}">昆明</a></li>
                        <li><a th:href="@{/index.html(city='西双版纳')}">西双版纳</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>Z</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">浙江</div>
                      <ul>
                        <li><a th:href="@{/index.html(city='杭州')}">杭州</a></li>
                        <li><a th:href="@{/index.html(city='湖州')}">湖州</a></li>
                        <li><a th:href="@{/index.html(city='嘉兴')}">嘉兴</a></li>
                        <li><a th:href="@{/index.html(city='金华')}">金华</a></li>
                        <li><a th:href="@{/index.html(city='宁波')}">宁波</a></li>
                        <li><a th:href="@{/index.html(city='衢州')}">衢州</a></li>
                        <li><a th:href="@{/index.html(city='绍兴')}">绍兴</a></li>
                        <li><a th:href="@{/index.html(city='台州')}">台州</a></li>
                        <li><a th:href="@{/index.html(city='温州')}">温州</a></li>
                        <li><a th:href="@{/index.html(city='义乌')}">义乌</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
      <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>

  <script>
  function search(){
    let param = $("#search-input").val();
    var url = "/city/cityData";
    $.ajax({
      url: url,
      type: "GET",
      dateType: "json",
      success: function (d) {
        for (var i=0;i<d.length;i++){
          if (d[i].name==param){
            location.href = "/index.html?city="+param;
         //   vueApp.areas = d[i].area
            //console.log(d[i].area)
          }else {
            alert("城市不存在")
          }
        }
      }
    });
  }
</script>
</body>
</html>
